<template>
	<view class="app-content">
		<view class="img">
			<!-- <u-swiper class="item" :list="list4" keyName="url" @change="e => currentNum = e.current" :autoplay="false"
				indicatorStyle="right: 20px">
			</u-swiper>
			 -->
			<swiper class="swiper" indicator-active-color="#FFFFFF" :autoplay="false" @change="handelChange" :current="currentNum">
				<swiper-item v-for="item,index in list" :key="index">
					<video v-if="item.includes('.mp4')" :src="currentNum==index?rq.imgUrl(item):''" autoplay :loop="true" style="width: 100%; height: 100%;" ></video>
					<image v-else :src="rq.imgUrl(item)" mode="aspectFill"
						class="syimg1"></image>
				</swiper-item>
			</swiper>
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text"> <text>{{ currentNum + 1 }}</text>/{{ list.length }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				currentNum: 0,
			}
		},
		onLoad(opt) {
			this.id=opt.id
			this.currentNum = Number(opt.index)
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.rq.getData('dynamic/dynamic_dateil', {
					id: this.id,
				}).then(res => {
					this.list = res.data.image
				})
			},
			handelChange(e){
				this.currentNum = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.app-content {
		height: 100vh;
		display: flex;
		align-items: center;
	}

	.img {
		width: 100%;
		margin-bottom: 120rpx;

		.item {
			width: 100%;
			padding-top: 30rpx;
		}

		.indicator-num {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 44rpx;
			
			.indicator-num__text {
				color: #999999;
				
				text{
					color: #333333
				}
			}
		}
	}

	.bottom {
		position: absolute;
		bottom: 0;
		height: 58px;
		width: 100%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b1,
		.b2 {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 24px;
			height: 24px;
		}
	}
	
	.swiper {
		height: 800rpx;
		width: 100%;
		.syimg1 {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	
</style>